<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <a-form :form="form" style="padding:10px;">
            <a-form-item style="display:none">
                <a-input v-decorator="['id']"/>
            </a-form-item>
            <a-row>
                <a-col :span="24">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="$ti18('rxForm.name','名称')">
                        <a-input :placeholder="$ti18('rxForm.name','名称')"
                                 v-decorator="['name', {rules: [{required: false, message: $ti18('rxForm.name','名称','','input')}]}]"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" :label="$ti18('rxForm.type','类型')">
                        <a-radio-group :options="officeType" v-model="mdl.type"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.fileName','文件名')">
                        <a-input class="clinput" :placeholder="i18n('form.fileName','文件名')" v-model="mdl.docName"
                                 v-decorator="['docName', {rules: [{required: false, message: i18n('form.fileName','文件名','input')}]}]"/>
                        <div class="crelist">
                            <a-button @click="creanVal">
                                <a-icon type="close"/>
                            </a-button>
                            <a-upload
                                :multiple="false"
                                :file-list="fileList"
                                :before-upload="beforeFileUpload"
                                :remove="creanVal"
                                accept=".xml,.html,.ppt,.pptx,.xls,.xlsx,.txt,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                            >
                                <a-button>
                                    <a-icon type="upload"/>
                                    {{i18n('list.selectFile','选择文件')}}
                                </a-button>
                            </a-upload>
                        </div>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" :label="$ti18('rxForm.describe','描述')">
                        <a-textarea :rows="10" :placeholder="$ti18('rxForm.describe','描述')"
                                    v-decorator="['description', {rules: [{required: false, message: $ti18('rxForm.describe','描述','','input')}]}]"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </rx-dialog>
</template>
<script>
    import SysOfficeTemplateApi from '@/api/system/core/sysOfficeTemplate'
    import {BaseForm, RxDialog, Util} from "@lowcode/jpaas-common-lib";

    export default {
        name: 'SysOfficeTemplateEdit',
        mixins: [BaseForm],
        components: {
            RxDialog,
        },
        data() {
            return {
                docId: "",
                officeType: [
                    {value: "normal", label: this.i18n('commonTem','普通模板')},
                    {value: "red", label: this.i18n('redTem','套红模板')}
                ],
                fileList: [],
                uploadFile: [],
                uploadType: "",
                uploading: false,
                widtyp: '5'
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "sysOfficeTemplate", key);
            },
            beforeFileUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 100;
                if (!isLt2M) {
                    this.$message.error(this.i18n('uploadFile','上传文件大于') + file.size + 'M！!');
                    return;
                }
                this.uploadFile.push(file);
                this.uploadType = "file";
                this.handleUpload(file);
                return true;
            },
            handleUpload(file) {
                const {
                    fileList
                } = this;
                const formData = new FormData();
                let timestamp = new Date().getTime();
                formData.append('files', file);
                formData.append("fileUid", Util.encryptWord(file.uid,true));
                formData.append("time", Util.encryptWord(timestamp,true));
                this.uploading = true;
                this.fileAdd(formData);
            },
            async fileAdd(formData) {
                let self = this;
                await SysOfficeTemplateApi.uploadOfficeFile(formData).then(res => {
                    if (!res.success) {
                        return;
                    }
                    var data = res.data[0];
                    self.docId = data.fileId;
                    self.mdl.docName = data.fileName
                });
            },
            creanVal(info) {
                this.docId = "";
                this.mdl.docName = "";
            },
            onload_(data) {
                if (typeof (data) == 'undefined') {
                    this.mdl = Object.assign({
                        type: "normal",
                        docName: ""
                    });
                    this.form.setFieldsValue(this.mdl);
                    return;
                }
                if (data.docId) {
                    this.docId = data.docId;
                }
                if (data.type) {
                    this.mdl = Object.assign({
                        type: data.type,
                        docName: data.docName
                    });
                    this.form.setFieldsValue(this.mdl);
                }
            },
            get(id) {
                return SysOfficeTemplateApi.get(id);
            },
            save(values) {
                values.type = this.mdl.type;
                values.docName = this.mdl.docName;
                if (this.docId) {
                    values.docId = this.docId;
                }
                return SysOfficeTemplateApi.save(values);
            }

        }
    }
</script>
<style>
    .crelist {
        float: right;
    }

    .clinput {
        float: left;
        margin-top: 5px;
        width: calc(100% - 160px)
    }

    .noteClass {
        height: 200px;
    }
</style>

